<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="keywords" content="javascript, jquery, plugins, listen, event, delegation, fast, light, scalable, indexers, ajax, rebind, dom, element, ariel, flesler" />
	<meta name="description" content="Demo of jQuery.Listen. A very light and fast plugin, to easily handle dynamic binding, using event delegation. Made by Ariel Flesler." />
	<meta name="robots" content="index,follow" />
	<title>jQuery.Listen</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery.listen.js"></script>
	<script type="text/javascript">
		jQuery(function( $ ){
		   /**
			* This is just for the demo, you don't need this.
			*/
			var htmls = [
				'<li class="hover click">Hover and click me</li>',
				'<li class="hover"><input type="text" value="Focus and blur me" /></li>',
				'<li class="click">Click me</li>',
				'<li class="hover">Hover me</li>'				
			];			
			
			/*listen globally using the static method (if not specified, the document is the listener) */		
			$.listen( 'click', '#additem', function(){
				var rand = Math.floor(Math.random()*4);
				$items.append( htmls[rand] );
			});
			//$.indexer('click').stop();//this would stop the global bindings for click
			
			/* use dom elements as listeners */
			var $items = $('#items')//listen for these 3 events, save it in a var because it is constantly reused
				.listen( 'click', 'li.click', function(e){//only the lis that have class click, are clickable
					$(this).toggleClass('clicked');
					e.stopPropagation();//no need to bother the document
				})
				//$items.indexer('click').stop();//this would stop all the click bindings for $items
				.listen( 'mouseover', 'li.hover', function(e){//only those li with class hover react to the mouse movement
					$(this).addClass('hovered');
				})
				.listen( 'mouseout', 'li.hover', function(e){
					$(this).removeClass('hovered');
				});
			
			/* the plugin can handle focus/blur using focusin/focusout.*/
			$items //mark the focused input inside $items
				.listen('focus','input',function(e){
					$(this).addClass('focused');
				})
				.listen('blur','input',function(e){
					$(this).removeClass('focused');
				})
				
			$('#cache').click(function(){
				$.listen.cache( this.checked );
				alert('caching? ' + this.checked);
			});
		});
	</script>
	<style type="text/css">
		body{
			background-color:#FAFAFA;
		}
		.clicked{
			background-color:lavender;
		}
		.hovered{
			background-color:#0C6;
		}
		.focused{
			color:red;
		}
		#container{
			padding-left:10px;
			width:740px;
			border:1px solid darkgray;
		}
		#items{
			margin:10px;
			cursor:pointer;
			border:1px solid darkgray;
			padding:0;
			width:700px;
		}
		#items li{
			text-align:center;
			border:1px solid darkgray;
			list-style:none;
		}
		div.download{
			margin-top:20px;
			border:1px black solid;
			width:200px;
		}
		#additem{
			width:100%;
		}
	</style>
</head>
<body>
	<div id="container">		
		<ul id="items">
			<li><button id="additem">Add Item</button></li>
			<li class="click">Click me</li>
			<li class="hover">Hover Me</li>
			<li class="hover click">Hover and click me</li>
			<li class="hover"><input type="text" value="Focus and blur me" /></li>												
		</ul>
		<label><input type="checkbox" id="cache" value="cache" />Cache</label>
		<div class="download">
			Links
			<ul>
				<li><a href="http://flesler.blogspot.com/2007/10/jquerylisten.html">Blog entry</a></li>
				<li><a href="http://jquery.com/plugins/project/Listen">Project Page</a></li>
			</ul>
		</div>
	</div>	
</body>
</html>
